<template>
  <Field
    type="textarea"
    v-model="$props.textDefault"
    :label="$props.label"
    :disabled="$props.disabled"
    :placeholder="$props.placeholder"
    :maxlength="$props.maxLen"
    :rows="$props.rows"
    :show-word-limit="showLimit"
    @update:model-value="onTextChange"
    @focus="onFocus"
    @blur="onBlur"
  />
</template>

<script setup>
import { defineProps, useContext } from 'vue';
import { Field } from 'vant';

const props = defineProps({
  textDefault: {
    type: [String, Number],
    default: null,
  },
  label: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: '请输入',
  },
  maxLen: {
    type: Number,
    default: 100,
  },
  rows: {
    type: Number,
    default: 2,
  },
  showLimit: {
    type: Boolean,
    default: true,
  },
});

// const value = computed(() => props.inputDefault);

const { emit } = useContext();

const onTextChange = (val) => {
  emit('textChange', val);
};

const onFocus = () => {
  emit('focus');
};

const onBlur = () => {
  emit('blur');
};
</script>
<style scoped lang="less"></style>
